<template>
  <div class="data-analysis bg-background text-foreground p-4">
    <h2 class="text-2xl font-bold mb-4">数据统计分析</h2>

    <div class="dashboard-grid">
      <!-- 地图部分 -->
      <div class="map-section bg-card text-card-foreground rounded-lg shadow-md p-4">
        <h2 class="text-xl font-semibold mb-2">地图</h2>
        <div class="map relative">
          <div id="map" class="w-full h-full"></div>
          <div class="legend absolute bottom-4 left-4 bg-card p-2 rounded shadow">
            <h3 class="text-sm font-semibold mb-1">图例</h3>
            <div class="legend-item flex items-center mb-1">
              <span class="legend-color bg-red-500 w-4 h-4 mr-2"></span>
              <span class="text-sm">危化车专用车道</span>
            </div>
            <div class="legend-item flex items-center">
              <span class="legend-color bg-yellow-500 w-4 h-4 mr-2"></span>
              <span class="text-sm">普通车道</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 智能识别部分 -->
      <div class="smart-recognition bg-card text-card-foreground rounded-lg shadow-md p-4">
        <h2 class="text-xl font-semibold mb-2">智能识别</h2>
        <div class="recognition-content flex mb-4">
          <div class="face-model w-1/3">
            <img src="https://via.placeholder.com/150.png?text=3D+Face+Model" alt="3D人脸模型" class="w-full h-auto" />
          </div>
          <div class="personal-info w-2/3 pl-4">
            <p><strong>姓名：</strong> {{ personalInfo.name }}</p>
            <p><strong>人员类型：</strong> {{ personalInfo.type }}</p>
            <p><strong>部门：</strong> {{ personalInfo.department }}</p>
            <p><strong>职务：</strong> {{ personalInfo.position }}</p>
            <p><strong>电话：</strong> {{ personalInfo.phone }}</p>
          </div>
        </div>
        <table class="personnel-table w-full">
          <thead>
            <tr>
              <th class="text-left">姓名</th>
              <th class="text-left">人员类型</th>
              <th class="text-left">部门</th>
              <th class="text-left">职务</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(person, index) in personnelList" :key="index">
              <td>{{ person.name }}</td>
              <td>{{ person.type }}</td>
              <td>{{ person.department }}</td>
              <td>{{ person.position }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 自动放行数据部分 -->
      <div class="automatic-counting bg-card text-card-foreground rounded-lg shadow-md p-4">
        <h2 class="text-xl font-semibold mb-2">自动放行数据</h2>
        <div class="flex justify-between">
          <div class="count-item">
            <p class="text-2xl font-bold">{{ autoReleaseData.personnel }}</p>
            <p class="text-sm">人员</p>
          </div>
          <div class="count-item">
            <p class="text-2xl font-bold">{{ autoReleaseData.vehicle }}</p>
            <p class="text-sm">车辆</p>
          </div>
        </div>
      </div>

      <!-- 视频监控部分 -->
      <div class="video-monitoring bg-card text-card-foreground rounded-lg shadow-md p-4">
        <h2 class="text-xl font-semibold mb-2">视频监控</h2>
        <div class="grid grid-cols-2 gap-2">
          <div v-for="n in 4" :key="n" class="video-feed bg-gray-200 aspect-video"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import { LineString } from 'ol/geom';
import { fromLonLat } from 'ol/proj';
import OSM from 'ol/source/OSM';
import { Style, Stroke } from 'ol/style';

const personalInfo = ref({
  name: '张三',
  type: '员工',
  department: '管理金',
  position: '经理',
  phone: '18611112222'
})

const personnelList = ref([
  { name: '张三', type: '内部人员', department: '管理金', position: '经理' },
  { name: '张三', type: '内部人员', department: '管理金', position: '经理' },
  { name: '张三', type: '内部人员', department: '管理金', position: '经理' },
  { name: '张三', type: '内部人员', department: '管理金', position: '经理' },
  { name: '张三', type: '内部人员', department: '管理金', position: '经理' },
])

const autoReleaseData = ref({
  personnel: 78,
  vehicle: 7
})

let map;
const vectorSource = new VectorSource();

const createLine = (coordinates, color, width) => {
  const line = new LineString(coordinates);
  const feature = new Feature(line);

  const style = new Style({
    stroke: new Stroke({
      color: color,
      width: width
    })
  });

  feature.setStyle(style);
  return feature;
};

onMounted(() => {
  // 渭南市大荔县的经纬度坐标（近似值）
  const daliCoordinates = fromLonLat([109.9426, 34.7951]);

  // 创建两条路径的坐标（这里使用虚构的坐标，您需要根据实际情况调整）
  const hazardousRoadCoordinates = [
    fromLonLat([109.93, 34.78]),
    fromLonLat([109.94, 34.79]),
    fromLonLat([109.95, 34.80]),
    fromLonLat([109.96, 34.81])
  ];

  const normalRoadCoordinates = [
    fromLonLat([109.92, 34.77]),
    fromLonLat([109.93, 34.78]),
    fromLonLat([109.94, 34.79]),
    fromLonLat([109.95, 34.80])
  ];

  const vectorLayer = new VectorLayer({
    source: vectorSource
  });

  map = new Map({
    target: 'map',
    layers: [
      new TileLayer({
        source: new OSM()
      }),
      vectorLayer
    ],
    view: new View({
      center: daliCoordinates,
      zoom: 12
    })
  });

  const hazardousRoadFeature = createLine(hazardousRoadCoordinates, 'rgba(255, 0, 0, 0.8)', 4);
  const normalRoadFeature = createLine(normalRoadCoordinates, 'rgba(255, 255, 0, 0.8)', 3);

  vectorSource.addFeature(hazardousRoadFeature);
  vectorSource.addFeature(normalRoadFeature);
});
</script>

<style scoped>
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 1rem;
  height: calc(100vh - 120px); /* 调整高度以填满剩余空间 */
}

.map-section {
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
}

.map {
  flex-grow: 1;
  min-height: 0; /* 允许地图容器缩小 */
}

#map {
  height: 100%; /* 确保地图填满容器 */
}

.smart-recognition {
  grid-column: 2;
  grid-row: 1;
}

.automatic-counting {
  grid-column: 2;
  grid-row: 2;
}

.video-monitoring {
  grid-column: 2;
  grid-row: 3;
}

.personnel-table th,
.personnel-table td {
  padding: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.video-feed {
  background-image: url('https://via.placeholder.com/150.png?text=Video+Feed');
  background-size: cover;
  background-position: center;
}
</style>
